<template>
  <a-drawer
    :title="title"
    :width="800"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >
    <a-spin :spinning="confirmLoading">
      <a-steps progressDot direction="vertical" :current="traceData.length">
        <a-step v-for="(trace,traceIndex) in traceData" :key="'trace'+traceIndex" :title="trace.label+(trace.content=='' ? '' : '：'+trace.content )">
          <p slot="description">
            操作人：{{ trace.createBy }}
            <br/>
            {{ trace.createTime }}
          </p>
        </a-step>
      </a-steps>

    </a-spin>
  </a-drawer>
</template>

<script>
import pick from 'lodash.pick'
import {httpAction} from '@/api/manage'
import {getAction} from '@/api/manage'

export default {
  name: "OmsReturnOrderTraceModalJX",
  components: {},
  data() {
    return {
      title: "退单跟踪",
      visible: false,
      confirmLoading: false,
      model: {},
      traceData: [],
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      url: {
        queryReturnOrderTrace: "/returns/omsOrderReturnApply/queryOmsReturnOrderTrace",
      },
    }
  },
  created() {
    console.log("created");
  },
  methods: {
    show(record) {
      this.visible = true;
      this.model = record;
      this.loadTraceData();
    },
    loadTraceData() {
      this.traceData = [];
      var params = {id: this.model.id};
      this.loading = true;
      getAction(this.url.queryReturnOrderTrace, params).then((res) => {
        if (res.success) {
          this.traceData = res.result;
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleSubmit() {

    },
    handleCancel() {
      this.close()
    },
  }
}
</script>
<style>
.ant-steps-dot .ant-steps-item-content {
  width: 90%;
}

p {
  margin-top: 0;
  margin-bottom: 0em;
}
</style>
